<template>
  <div class="header">
    <div :class="{
      'text-left':true,
      'text-left-dark':isDarkTheme,
      'text-left-light':!isDarkTheme
    }">
      <div class="text-left-item">
        <span class="sf-18">{{time}}</span>
        <br>
        <span class="sf-14"> {{date}} {{dayOfWeek}}</span>
      </div>
    </div>
    <div :class="{
      'text-center':true,
      'text-center-dark':isDarkTheme,
      'text-center-light':!isDarkTheme
    }">
      <h3>中国电信集团财务机器人数据驾驶舱</h3>
    </div>
    <div :class="{
      'text-right':true,
      'text-right-dark':isDarkTheme,
      'text-right-light':!isDarkTheme
    }">
      <!-- <el-switch
        :value="pageConfig.isDarkTheme"
        @change="updatePageConfig"
      >
      </el-switch> -->
      <FullscreenBtn @resizeMap="$emit('resizeMap')"></FullscreenBtn>
      <!-- <span class="company-name">中国电信股份有限公司</span> -->
      <span class="ft-20">区域:</span>
      <div class="custom-select">
        <el-select
          v-model="form.province"
          clearable
          :popper-append-to-body="false"
          placeholder="请选择省份"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
// import { getProvinceList } from '@/api/big-screen/index.js'
import FullscreenBtn from './FullscreenBtn.vue'
export default {
  props: {
    pageConfig: Object
  },
  components: { FullscreenBtn },
  data () {
    return {
      date: '',
      dayOfWeek: '',
      time: '',

      form: {
        year: new Date().getFullYear(),
        province: '全国'
      },
      provinceList: [
        {
          value: '全国',
          label: '全国'
        },
        {
          value: '江苏',
          label: '江苏'
        }
      ]
    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  mounted () {
    setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  methods: {
    updatePageConfig (val) {
      this.$emit('updatePageConfig', val)
    },
    updateTime() {
      const temp = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.date = this.$moment().format('YYYY-MM-DD')
      const day = this.$moment().day();
      this.dayOfWeek = temp[day];
      this.time = this.$moment().format('HH:mm:ss')
    },

  }
}
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 9vh;
  display: flex;
  // align-items: center;
  // justify-content: space-between;
  // flex-direction: row;
}

.text-left {
  width: 30%;
  padding: 2vh 0 0 0;
  font-family: "TCloudNumber";
  display: flex;
  align-items: center;
  .sf-18 {
    font-size: 18px; 
  }
}
.text-center {
  width: 40%;
  padding: 0.5vh 0 0 0;
  font-family: "Alimama ShuHeiTi";
  font-size: 23px; 
  background-clip: text;
  font-weight: 700;
  text-align: center;
}

.text-right {
  width: 30%;
  padding: 2vh 0 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/**======== 深色模式起 ======== */
.text-left-dark {
  color: #fff;
}
.text-center-dark {
  h3 {
    background: linear-gradient(180deg, #FFF 51.85%, #A1D5FC 83.33%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

// 深色模式
.text-right-dark {
  color: #3cbce5;
  .ft-20 {
    margin: 0 0 0 10px;
    color: #fff;
    font-size: 16px;
    text-shadow: 0 0 8px #1298FF;
    font-family: "Alimama ShuHeiTi";
  }
  .custom-select {
    margin-left: 8px;
    height: 34px;
    width: 135px;
    background: url("./css/select-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // 设置下拉框透明
  ::v-deep .el-input--small .el-input__inner {
    height: 30px;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 500;
    font-family: "Alibaba PuHuiTi 2.0";
  }

  /* // 下拉框箭头颜色 */
  // ::v-deep .el-icon-arrow-up:before {
  //   color: #4EEAFF;
  // }
  ::v-deep .el-icon-arrow-up:before {
    color: transparent;
    background: url("./css/arrow-dark.png") no-repeat;
    background-size: 14px 10px;
  }
  // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
  ::v-deep .el-popper .popper__arrow,
  ::v-deep .el-popper .popper__arrow::after {
    display: none;
  }

  // 设置下拉框的背景颜色及边框属性；
  ::v-deep .el-select-dropdown {
    // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示；
    background-color: darkslategrey !important;
    color: #fff;
    position: absolute !important;
    // top: 0 !important;
    left: 0 !important;
    border: 1px solid rgba(15, 120, 255, 0.24);
  }
  // 设置下拉框的字体属性及背景颜色；
  .el-select-dropdown__item {
    color: #fff;
    background-color: transparent;
  }
  // 设置下拉框列表的 padding 值为：0；(即：样式调整)
  ::v-deep.el-select-dropdown__list {
    padding: 0;
  }
  // 设置输入框与下拉框的距离为：0; (即：样式调整)
  ::v-deep.el-popper[x-placement^=bottom] {
    margin-top: 0px;
    background: transparent;
  }
  .el-select-dropdown__item:hover {
    color: #fff;
    background-color: rgba(15, 120, 255, 0.24);
  }
  .el-select-dropdown__item.selected {
    color: #fff;
    background-color: rgba(15, 120, 255, 0.24);
  }

 
  // 设置鼠标悬停在下拉框列表的悬停色；
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    color: #fff;
    background: transparent;
  }

  ::v-deep .el-select-dropdown__item.selected {
    color: #24E9EA;
    background: transparent;
  }
}

/**======== 深色模式止 ======== */


/**======== 浅色模式起 ======== */
.text-left-light {
  color: #393D44;
}
.text-center-light {
  h3 {
    background: linear-gradient(180deg, #393D44 51.85%, #A1D5FC 83.33%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.text-right-light {

}
/**======== 浅色模式止 ======== */



// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {}
// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {}
// 2K
@media screen and (max-width: 2560px) {
  .text-left-dark {
    .sf-18 {
      font-size: 28px;
    }
  }
  .text-center-dark {
    font-size: 38px;
  }

  .text-right-dark {
    color: #3cbce5;
    .ft-20 {
      font-size: 26px;
    }
    .sf-14 {
      font-size: 22px;
    }
    .custom-select {
      height: 50px;
      width: 180px
    }
    ::v-deep .el-input--small .el-input__inner {
      font-size: 26px;
    }
  }
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .text-left-dark {
    .sf-18 {
      font-size: 18px;
    }
    .sf-14 {
      font-size: 14px;
    }
  }
  .text-center-dark {
    font-size: 23px;
  }

  .text-right-dark {
    color: #3cbce5;
    .ft-20 {
      font-size: 16px;
    }
    .custom-select {
      height: 34px;
      width: 120px;
    }
    ::v-deep .el-input--small .el-input__inner {
      font-size: 16px;
    }
  }
}
// 14寸笔记本
@media screen and (max-width: 1366px) {}

  
</style>
